<template>
    <div id="kLine">
        <div>
            <el-breadcrumb v-if="false" class="tops" separator>
                <el-breadcrumb-item style="margin-top:8px">
                    <p style="color:#fff">{{tops.symbol}}</p>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <p :class="[tops.riseAndfall>=0?'green':'red']" style="margin-top:8px">{{tops.close}}</p>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <p>涨幅</p>
                    <p
                        style="margin-top:5px;"
                        :class="[tops.riseAndfall>=0?'green':'red']"
                    >{{tops.riseAndfall}}</p>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <p>最高价</p>
                    <p style="margin-top:5px;color:#fff">{{tops.high}}</p>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <p>最低价</p>
                    <p style="margin-top:5px;color:#fff">{{tops.low}}</p>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <p>24H量</p>
                    <p style="margin-top:5px;color:#fff">{{tops.volume}} {{curMsg.childCoinName}}</p>
                </el-breadcrumb-item>
            </el-breadcrumb>
            <iframe
                id="tradingViews"
                width="100%"
                height="500"
                src="../../static/charting_library-master/index.html"
                frameborder="0"
            ></iframe>
            <buySell></buySell>
        </div>
        <div v-if="false" class="handicap">
            <handicap></handicap>
        </div>
    </div>
</template>
<script>
import { get24hrDataByTwoCoinName } from "../../api/api";
import handicap from "./handicap";
import buySell from "./buySell"
import { mapState } from "Vuex";
export default {
    name: "kLine",
    data() {
        return {
            tops: [],
            curMsg: []
        };
    },
    components: {
        handicap,
        buySell
    },
    computed: {
       
    },
    watch: {
       
    },
    created() {
       
    },
    methods: {
        
    }
};
</script>
<style lang='less' scoped>
@color1:#162235;
@color2:#8B91B1;
@color3:#1B273B;
@line:#1e2b40;
@color4:#111D2D;
@color5:#1A273A;
#tradingViews{
    border: 1px solid @line;
}
#kLine {
    display: flex;
    background-color: @color1;
    > div:first-child {
        width: 100%;
        background-color: @color4;
        .tops {
            background-color: @color4;
            padding: 15px 10px 0 10px;
            box-sizing: border-box;
            height: 40px;
            p {
                margin: 0;
                padding: 0;
                font-size: 10px;
                color: @color2;
            }
        }
    }
    .handicap {
        margin-left: 10px;
        width: 25%;
    }
}
.red {
    color: #eb375d !important;
}
.green {
    color: #4cdfb0 !important;
}
/deep/.el-breadcrumb__item {
    margin-right: 10px;
}
</style>